<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>ZoZoのPlayer</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" type="text/css" href="BootStrap/css/bootstrap.min.css">
    <style>
        .myaudio {
            width: 100%;
            height: 40px;
            margin-top: 5px;
            outline: none;
            background-color: #f1f3f4;
        }

        .row-vertical-center {
            display: flex;
            align-items: center;
        }
    </style>


</head>

<body>
    <!-- "container-fluid" 100% -->
    <div class="container" id="player">
        <!-- 标题和搜索 -->
        <div class="row " style="background-color: #8E354A ; ">

            <h1 class="col-md-4 col-sm-8">ZoZoのPlayer</h1>
            <p>
            <div class="play_search col-md-3 col-md-offset-4 input-lg">
                <input class="form-control" type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic">
            </div>
            </p>

        </div>
        <!-- 歌曲列表 glyphicon glyphicon-play -->
        <div class="row">
            <div class="col-md-3" style="height:480px;overflow: auto;">
                <table class="table table-hover  table-stripe">
                    <thead>
                        <th>#</th>
                        <th>音乐标题</th>
                        <th>MV</th>
                    </thead>
                    <tr v-for="(item,index) in musicList" @click="playMusic(item.id)">
                        <th href="javascript:;">{{index + 1}}</th>
                        <th>{{item.name}}</th>
                        <th v-if="item.mvid!=0"><span class="glyphicon glyphicon-play"
                                @click="playMV(item.mvid)">MV</span></th>
                    </tr>
                </table>
            </div>
            <!-- 封面和mv -->
            <!-- <div class="col-md-3 col-md-offset-2"> -->
            <div class="play_video col-md-4" v-show="isShow">
                <video :src="mvUrl" autoplay controls="controls"></video>
                <div class="mask" @click="quitMV"> 点这里</div>
            </div>
            <!-- 封面  row-vertical-center-->

            <div class="play_center col-md-4 ">
                <img v-show="!isShow" class="img-rounded" :src="musicPicUrl" class="music_Cover" width="480px" />
            </div>
            <!-- 评论 -->
            <div class="col-md-3 col-md-offset-2 ">
                <div class="panel " style="height:480px;overflow: auto;">
                    <div class="panel-heading" style="background-color: #8E354A ; ">
                        <h3 class="panel-title">热门评论</h3>
                    </div>
                    <div class="panel-body">
                        <div class="play_hotComments">
                            <dl v-for="item in hotComments">
                                <dt><img class="img-circle .img-responsive" style="width: 40px;"
                                        :src="item.user.avatarUrl"></dt>
                                <dt class="name"> {{item.user.nickname}}</dt>
                                <dd class="detail"> {{item.content}}</dd>
                                <h1 class="divider"></h1>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
            <!-- audio -->
            <div class="play_audio col-md-12" :class="{playing:isPlaying}">
                <audio :src="musicUrl" autoplay controls class="myaudio" @play="play" @pause="pause" class="myaudio">
                </audio>
            </div>
        </div>
        <!-- <div class="col-md-3 ">
            <div class="panel ">
                <div class="panel-heading" style="background-color: #8E354A ; ">
                      <h3 class="panel-title">热门评论</h3>
                </div>
                <div class="panel-body">
                  <div class="play_hotComments"  style="height:480px;overflow: auto;">
                      <dl v-for="item in hotComments">
                          <dt><img class="img-circle .img-responsive" style="width: 40px;" :src="item.user.avatarUrl" ></dt>
                          <dt class="name" > {{item.user.nickname}}</dt>
                          <dd class="detail"> {{item.content}}</dd>
                          <h1 class="divider"></h1>
                      </dl>
                  </div>
                </div>
          </div>
        </div> -->




    </div>




    <!-- vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- bootstrap插件js -->
    <script src="js/jquery-3.6.0.js"></script>
    <script src="BootStrap/js/bootstrap.min.js"></script>
    <script src="./app.js"></script>

</body>

</html>